<!--
 * @Author: daidai
 * @Date: 2022-02-20 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-25 09:18:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <div v-if="pageflag" class="chart-container">
    <div class="box">
      <div class="box-info">
        <div class="light animat">131个</div>
        <div>数量</div>
      </div>
      <div class="box-info">
        <div class="light animat">19495亩</div>
        <div>占地面积</div>
      </div>
      <div class="box-info">
        <div class="light animat">940万㎡</div>
        <div>经营面积</div>
      </div>
      <div class="box-info">
        <div class="light animat">64629个</div>
        <div>商铺数量</div>
      </div>
      <div class="box-info">
        <div class="light animat">45484户</div>
        <div>经营户数</div>
      </div>
      <div class="box-info">
        <div class="light animat">142904人</div>
        <div>从业人员</div>
      </div>
    </div>
  </div>
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
import { currentPOST } from 'api/modules';

export default {
  data() {
    return {
      pageflag: true,
      timer: null,
    };
  },
  created() {
    this.getData();
  },
  mounted() { },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      this.pageflag = true;

      this.$nextTick(() => {
        this.init();
      });
      // this.switper();
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
        looper,
        2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
      );
      let myChart = this.$refs.charts.chart;
      myChart.on('mouseover', (params) => {
        this.clearData();
      });
      myChart.on('mouseout', (params) => {
        this.timer = setInterval(
          looper,
          2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
        );
      });
    },
    init() { },
  },
};
</script>
<style lang="scss" scoped>
.chart-container {
  position: relative;
  width: 100%;
  height: 100%;

  .box {
    position: absolute;
    top: 6px;
    left: 0px;
    width: 100%;
    height: 70px;
    z-index: 0;
    // border: 1px solid red;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    .box-info {
      // border: 1px solid red;
      margin: 8px auto;
      width: 100px;

      // line-height: 38px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      padding: 10px 10px 45px 10px;

      background: url('../../assets/img/launch/home/llc_bg.png') no-repeat center;
      background-position: center 14px;
      background-size: 80% 90%;

      // // 呼吸光效
      // &::after {
      //   content: '';
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   width: 100%;
      //   height: 100%;
      //   background: radial-gradient(circle,
      //       rgba(255, 255, 255, 0.1),
      //       transparent);
      //   animation: breathe 3s ease-in-out infinite;
      // }

      // // 缩放效果
      // animation: bgScale 4s ease-in-out infinite;

      .light {
        margin-top: -10px;
        margin-bottom: 12px;
        // padding-left: 10px;
        color: #ffb507;
        font-size: 20px;
        font-weight: 600;
        // font-family: 'YouSheBiaoTiHei';
      }
    }
  }
}

@keyframes breathe {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.7;
  }
}

@keyframes bgScale {

  0%,
  100% {
    background-size: 80% 90%;
    filter: brightness(0.9);
  }

  50% {
    background-size: 80% 90%;
    filter: brightness(1.1);
  }
}
</style>
